<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/vue/element.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="app" style="text-align: center">
        <div style="float: right;">
            <el-button type="primary" @click="showAddStu">添加学生</el-button>
        </div>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="公司名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    label="店铺名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="EMAIL"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="mobile"
                    label="公司手机"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="telephone"
                    label="公司电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="addressDetail"
                    label="详细地址"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="linkmanName"
                    label="联系人姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="linkmanQq"
                    label="联系人QQ"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="linkmanMobile"
                    label="联系人电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="linkmanEmail"
                    label="联系人EMAIL"
                    width="120">
            </el-table-column>

            <el-table-column label="操作" width="180">
                <template slot-scope="props">
                    <el-button type="warning" @click="showEditStu(props.row)">编辑</el-button>
                    <el-button type="danger" @click="deleteStu(props.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加公司信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref： 在获取表单对象时使用
            -->
            <el-form :model="addFormData" ref="addForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="公司名" prop="name">
                    <el-input v-model="addFormData.name"></el-input>
                </el-form-item>
                <el-form-item label="店铺名称" prop="nickName">
                    <el-input v-model="addFormData.nickName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="addFormData.password"></el-input>
                </el-form-item>
                <el-form-item label="EMAIL" prop="email">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="addFormData.email"></el-input>
                </el-form-item>
                <el-form-item label="公司手机" prop="mobile">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="addFormData.mobile"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="addFormData.status"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="addressDetail">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="addFormData.addressDetail"></el-input>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="linkmanName">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="addFormData.linkmanName"></el-input>
                </el-form-item>
                <el-form-item label="联系人QQ" prop="linkmanQq">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="addFormData.linkmanQq"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话" prop="linkmanMobile">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="addFormData.linkmanMobile"></el-input>
                </el-form-item>
                <el-form-item label="联系人EMAIL" prop="linkmanEmail">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="addFormData.linkmanEmail"></el-input>
                </el-form-item>

                <el-form-item align="right">
                    <el-button type="primary" @click="addStu()">添加</el-button>
                    <el-button @click="resetForm('addForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


        <el-dialog title="编辑公司信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')" >
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref： 在获取表单对象时使用
            -->
            <el-form :model="editFormData" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="公司名" prop="name">
                    <el-input v-model="editFormData.name"></el-input>
                </el-form-item>
                <el-form-item label="店铺名称" prop="nickName">
                    <el-input v-model="editFormData.nickName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.password"></el-input>
                </el-form-item>
                <el-form-item label="EMAIL" prop="email">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.email"></el-input>
                </el-form-item>
                <el-form-item label="公司手机" prop="mobile">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.mobile"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.status"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="addressDetail">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.addressDetail"></el-input>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="linkmanName">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.linkmanName"></el-input>
                </el-form-item>
                <el-form-item label="联系人QQ" prop="linkmanQq">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.linkmanQq"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话" prop="linkmanMobile">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.linkmanMobile"></el-input>
                </el-form-item>
                <el-form-item label="联系人EMAIL" prop="linkmanEmail">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.linkmanEmail"></el-input>
                </el-form-item>

                <el-form-item align="right">
                    <el-button type="warning" @click="updateStu()">修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <div class="block">
<!--            <span class="demonstration">完整功能</span>-->
            <!--
                分页组件
                 @size-change： 当改变每页条数时触发的函数
                 @current-change：当改变页码时触发的函数
                 current-page ：默认的页码
                 :page-sizes：每页条数选择框中显示的值
                 :page-size : 默认的每页条数
                 layout： 分页组件的布局
                     total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
                 :total: 总条数
            -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.pageNum"
                    :page-sizes="[2, 3, 4]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</body>
</html>
<script src="/vue/jquery-3.3.1.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="/vue/axios-0.18.0.js"></script>
<script src="/vue/element.js"></script>
<script>
    Vue.config.productionTip = false
    new Vue({
        el:"#app",
        data:{
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            tableData: [],//展示的表格数据
            editFormData: {},//编辑表单的数据
            addFormData:{},//添加表单的数据
            pagination: {
                pageNum: 1, //当前页
                pageSize: 2,    //每页显示条数
                total: 0        //总条数
            }
        },
        //钩子函数
        //在所有函数之前执行此函数
        mounted(){
            //调用分页查询的功能
            this.loadTable();
        },
        methods:{
            loadTable() {
                //分页查询方法
                axios.post("/seller/selectAllSeller","pageNum="+this.pagination.pageNum+"&pageSize="+this.pagination.pageSize).then(resp => {
                    //将查询出来的数据赋值
                    this.tableData = resp.data.obj.sellerList;
                    //设置分页参数
                    this.pagination.pageNum=resp.data.obj.pageNum; //当前页
                    this.pagination.total=resp.data.obj.total;
                })
            }, //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                console.log(this.pagination.pageSize)
                //重新执行查询
                this.loadTable();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum)  {
                //修改分页查询的参数
                this.pagination.pageNum  = pageNum;
                console.log(this.pagination.pageNum)
                //重新执行查询
                this.loadTable();
            },
            showAddStu() {
                //弹出窗口
                this.dialogTableVisible4add = true;
            },
            addStu(){
                //返回表单中的数据
                /*var param = "number="+this.formData.number+"&name="+this.formData.name+"&birthday="+this.formData.birthday
                    +"&address="+this.formData.address+"&currentPage="+this.pagination.currentPage+"&pageSize="
                    +this.pagination.pageSize;
                axios.post("addstu",param)
                    .then(resp =>{
                        //将查询出来的数据赋值
                        this.tableData = resp.data.list;
                        //设置分页参数
                        this.pagination.currentPage=resp.data.currentPage; //当前页
                        this.pagination.total=resp.data.total;
                    })*/
                //关闭添加窗口
                this.dialogTableVisible4add=false;
            },
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了addFormData， 清空addFormData数据
                this.addFormData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
            },
            showEditStu(row) {
                //1. 弹出窗口
                this.dialogTableVisible4edit = true;
                //2. 显示表单数据
                this.editFormData = {
                    name:row.name,
                    nickName:row.nickName,
                    password:row.password,
                }
            },
            deleteStu(row){
                //删除功能
                if(confirm("确认删除？")){
                   /* var param="number="+row.number+"&currentPage="+this.pagination.currentPage+"&pageSize="
                        +this.pagination.pageSize;
                    axios.post("deletestu",param)
                        .then(resp =>{
                            //将查询出来的数据赋值
                            this.tableData = resp.data.list;
                            //设置分页参数
                            this.pagination.currentPage=resp.data.currentPage; //当前页
                            this.pagination.total=resp.data.total;
                        })*/
                }
            }

        }
    })

</script>
